<template>
  <q-layout>
    <q-layout-header ref="header">
      <xheader :title="title"></xheader>
    </q-layout-header>
    <q-page-container>
      <xscrollarea :scroll-height="scrollHeight">
        <q-page padding>
          <q-select
            v-model="planCode"
            float-label="计划编码"
            filter
            :options="planCodeOptions" clearable
          />
          <q-select
            v-model="facCode"
            float-label="设备编码"
            :options="facCodeOptions" clearable
          />
          <div v-show="data.length">
            <br>
            <q-card>
              <q-card-title>
                设备名称：{{name}}
                <div slot="subtitle">
                  车间：{{bzName}}<br>
                  设备责任人：{{yhName}}
                </div>
              </q-card-title>
              <q-card-main>
                <q-card-separator v-for="(d,index) in data" v-if="index!==0"/>
                <q-item v-for="d in data">
                  <q-item-main>
                    <q-checkbox v-model="d.checked" :label="d.MAINTAIN_NAME" left-label/>
                    <q-input float-label="保养说明" placeholder="选填" v-model="d.remark" type="textarea" rows="1"/>
                  </q-item-main>
                </q-item>

              </q-card-main>

            </q-card>
          </div>
        </q-page>
      </xscrollarea>
    </q-page-container>
    <q-layout-footer ref="footer">
      <q-toolbar color="primary" v-show="data.length">
        <q-toolbar-title>
        </q-toolbar-title>
        <!--<q-btn label="全选"/>&nbsp;&nbsp;-->
        <q-btn icon="settings_applications" push label="提交" @click="submit"/>
      </q-toolbar>
    </q-layout-footer>
  </q-layout>
</template>

<script>

  import utils from '../../js/utils'
  import Xheader from '../../components/xheader'
  import Xscrollarea from '../../components/xscrollarea'

  export default {
    name: 'equipment_maintenance',
    components: { Xscrollarea, Xheader },
    props: {
      title: {}
    },
    data: () => ({
      scrollHeight: 0,
      planCode: '',
      planCodeOptions: [],
      facCode: '',
      facCodeOptions: [],
      name: '',
      bzName: '',
      yhName: '',
      data: []
    }),
    computed: {},
    watch: {
      planCode () {
        this.getFacCodeOptions()
      },
      facCode () {
        this.getInfo()
      }
    },
    methods: {
      initPlanData () {
        this.axios.post(this.$conf.server + '/equipment/initProcessInfo', {}).then(res => {
          if (res.data.result) {
            for (let v of res.data.Plans) {
              this.planCodeOptions.push({ value: v.CODE, label: v.CODE + '-' + v.NAME })
            }
          }
        })
      },
      getFacCodeOptions () {
        this.data = []
        this.name = ''
        this.bzName = ''
        this.yhName = ''
        this.facCodeOptions = []
        if (this.planCode !== '') {
          this.axios.post(this.$conf.server + '/equipment/loadCollectionByProcessId.html',
            this.$qs.stringify({ CODE: this.planCode })).then(res => {
            if (res.data.result) {
              for (let v of res.data.failices) {
                this.facCodeOptions.push({ value: v.SHEBEICODE, label: v.SHEBEICODE })
              }
            }
          })
        }
      },
      getInfo () {
        if (this.facCode !== '') {
          this.data = []
          this.name = ''
          this.bzName = ''
          this.yhName = ''
          this.axios.post(this.$conf.server + '/equipment/EquipmentInformation.html',
            this.$qs.stringify({
              PLANCODE: this.planCode,
              CODE: this.facCode
            })).then(res => {
            if (res.data.result) {
              if (res.data.information && res.data.information.length) {
                this.data = res.data.information
                this.name = this.data[0].NAME
                this.bzName = this.data[0].BZNAME
                this.yhName = this.data[0].YHNAME
                for (let d of this.data) {
                  // d.checked = false
                  this.$set(d, 'checked', false)
                }
                this.$nextTick(() => {
                  this.changeScrollHeight()
                })
              } else {
                this.$parent.info(`计划编码为${this.planCode}下的设备无保养项目！`)
              }
            }
          })
        }
      },
      changeScrollHeight () {
        this.scrollHeight = this.$parent.webHeight - this.$refs.header.$el.clientHeight - this.$refs.footer.$el.clientHeight
      },
      submit () {
        let chestr = ''
        let remarks = ''
        for (let d of this.data) {
          if (d.checked) {
            chestr += d.MAINTAIN_NAME + ','
            remarks += utils.nvl(d.remark) + ','
          }
        }
        if (chestr === '') {
          this.$parent.warn('请选择保养项目')
          return
        }
        this.axios.post(this.$conf.server + '/equipment/EquipmentPreservation',
          this.$qs.stringify({
            Equipmenttype: 'maintain',
            Remarks: remarks,
            CODE: this.facCode,
            PLANCODE: this.planCode,
            CHESTR: chestr,
            user: this.yhName
          }))
          .then(res => {
            if (res.data.results === 'false') {
              this.$parent.error('处理失败')
            } else {
              this.$parent.info('处理成功')
              this.planCode = ''
              this.facCode = ''
              this.facCodeOptions = []
              this.name = ''
              this.bzName = ''
              this.yhName = ''
              this.data = []
            }
          })
      }
    },
    mounted () {
      this.scrollHeight = this.$parent.webHeight - this.$refs.header.$el.clientHeight
    },
    created () {
      this.initPlanData()
    }
  }
</script>

<style scoped>

</style>
